<template>
  <view>
    <Search />
    <Tabs :data="tabsData" />
    <GoodsItem :goodsList="goods" />
    <view class="tips" v-if="!pageSwitch">
      😀我也是有底线的
    </view>
  </view>
</template>

<script>
import Search from "../../components/search/index.vue";
import Tabs from "../../components/tabs/index.vue";
import GoodsItem from "@/components/goodsItem/index.vue";

import { getGoogsItem } from "@/api/index";
export default {
  components: {
    Search,
    Tabs,
    GoodsItem,
  },
  data() {
    return {
      tabsData: [
        { id: 1, text: "综合" },
        { id: 2, text: "销量" },
        { id: 3, text: "价格" },
      ],
      cid: 0,
      pagenum: 1,
      pagesize: 10,
      goods: [],
      pageSwitch: true,
    };
  },
 async onPullDownRefresh(){
    console.log('下拉了');
    this.pagenum =1
    this.goods = [],
    this.pageSwitch = true
   await this.getGoodsData()
   uni.stopPullDownRefresh()
  },
  onReachBottom() {
  if(this.pageSwitch){
    this.pagenum += 1;
    this.getGoodsData();
  }
  },
  onLoad(query) {
    console.log(query);
    this.cid = query.cid;
    this.getGoodsData();
  },
  methods: {
    async getGoodsData() {
      uni.showLoading({title:'疯狂加载中...'})
      const res = await getGoogsItem({
        cid: this.cid,
        pagenum: this.pagenum,
        pagesize: this.pagesize,
      });
      const { goods,total } = res.data.message
      uni.hideLoading ()
      this.goods = [...this.goods, ...goods];
      if(this.goods.length === total){
        this.pageSwitch = false
      }
    },
  },
};
</script>

<style lang="less" >
 .tips{
   height: 100rpx;
   display: flex;
   align-items: center;justify-content: center;
 }
</style>